<template>
  <div>
    <div
      class="servers-wrapper mysql-model"
      v-show="2"
      style="padding-top: 0px !important;"
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="task-box">
            <div class="title">
              <!-- <span>{{$t('tasks number of waiting running')}}</span> -->
              <span>待运行任务</span>
            </div>
            <div class="value-p">
              <strong> {{queueCount.taskQueue}}</strong>
            </div>
          </div>
        </el-col>

        <el-col :span="6">
          <div class="task-box">
            <div class="title">
              <!-- 待执行命令数
              <span>{{$t('command number of waiting for running')}}</span> -->
              <span>正在运行任务</span>
            </div>
            <div class="value-p">
              <strong> {{commandCountData.normalCount}}</strong>
            </div>
          </div>
        </el-col>

        <el-col :span="6">
          <div class="task-box">
            <div class="title">
              <!-- 待杀死任务数
              <span>{{$t('task number of ready to kill')}}</span> -->
              <span>运行成功任务</span>
            </div>
            <div class="value-p">
              <strong>{{queueCount.taskKill}}</strong>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="task-box">
            <div class="title">
              <!-- <span>{{$t('failure command number')}}</span> -->
              <span>运行失败任务</span>
            </div>
            <div class="value-p">
              <strong> {{commandCountData.errorCount}}</strong>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <m-spin :is-spin="isLoading"></m-spin>
    <div class="title">
      <span>创建调度请求总数：{{totalTask || 0}}</span>
      <el-date-picker
        v-model="year"
        type="year"
        :clearable="false"
        size="mini"
        style="width:100px"
        value-format="yyyy"
        format="yyyy年"
      >
      </el-date-picker>
    </div>

    <div class="month-card">
      <el-row :gutter="20">
        <el-col
          :span="4"
          v-for="(item,i) in monthList"
          :key="item"
        >
          <div
            class="box"
            :style="{'--actColor':item.instanceCount?'#f27011':'#CDD5DC'}"
            :class="{'is-val':item.instanceCount,'is-curr':currentMonth === item.month.toString().substr(4),'is-actived':activeMonth===item.month.toString().substr(4),'is-bottom20':i<6}"
            @mouseover="handlerOver(item)"
            @mouseout="activeMonth=null"
          >
            <div class="box__title">{{item.month.toString().substr(4)}}月</div>
            <div class="box__body">
              <span :class="{'no-data':!item.instanceCount}">{{item.instanceCount || '暂无数据'}}</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
  import io from '@/module/io'
  import _ from 'lodash'
  import moment from 'moment'
  import { mapActions } from 'vuex'
  import mSpin from '@/module/components/spin/spin'
  import themeData from '@/module/echarts/themeData.json'
  // import mListConstruction from '@/module/components/listConstruction/listConstruction'

  export default {
    components: {
      mSpin
    },
    data () {
      return {
        monthList: [],
        year: new Date().getFullYear() + '',
        currentMonth: moment().format('MM'),
        /* 鼠标移入移除交互 */
        activeMonth: null,
        isLoading: false,
        queueCount: {},
        commandCountData: {},
        color: themeData.color,
        isvisited: 0

      }
    },
    computed: {
      totalTask () {
        let total = 0
        this.monthList.forEach(e => {
          total += e.instanceCount || 0
        })
        return total
      }
    },
    watch: {
      year (newval) {
        if (newval) {
          this.queryProcessInstanceNumsByMonth()
          this.queryCommandStateCountByMonth()
        }
      }
    },
    created () {
      this.queryProcessInstanceNumsByMonth()
      this.queryCommandStateCountByMonth()
      this.isLoading = true
      this.getQueueCount().then(res => {
        this.queueCount = res.data
        this.isLoading = false
      }).catch(() => {
        this.isLoading = false
      })
    },
    methods: {
      ...mapActions('projects', ['getQueueCount']),
      ...mapActions('projects', ['getCommandStateCount']),
      handlerOver (item) {
        this.activeMonth = item.month.toString().substr(4)
      },
      queryCommandStateCountByMonth () {
        this.getCommandStateCount({ year: this.year }).then(res => {
          let normal = 0
          let error = 0
          _.forEach(res.data, (v, i) => {
            let key = _.keys(v)
            if (key[0] === 'errorCount') {
              error = error + v.errorCount
            }
            if (key[1] === 'normalCount') {
              normal = normal + v.normalCount
            }
          }
          )
          this.commandCountData = {
            normalCount: normal,
            errorCount: error
          }
        }).catch(() => {
        })
      },
      queryProcessInstanceNumsByMonth () {
        io.get('projects/process-instances/instance-num/month', { year: this.year }).then(res => {
          if (res.code === 0) {
            this.monthList = res.data
          }
        })
      },
      visitfun (month) {
        this.isvisited = month
        console.log(this.isvisited)
      }
    },
    mounted () {

    }

  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
@import '../servers.scss';

.title {
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box {
  background: #f5f6f8;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 10px;
  // box-shadow: 0px 0px 2px 2px rgba(242,112,17,0.20);
  &__title {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
  }
  &__body {
    text-align: center;
    font-size: 40px;
    border-radius: 8px;
    font-family: Oxanium, Oxanium-Bold;
    font-weight: 700;
    // color: #f27011;
    color: #333333;
    height: 70px;
    padding: 15px;
    overflow: hidden;
    .choose {
      color: #f27011;
      font-weight: 700;
    }
    .no-data {
      color: #cccccc;
      font-weight: normal;
      font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
      white-space: nowrap;
    }
  }
  &.is-curr {
    background: rgba(242, 112, 17, 0.1);
    color: #f27011;
    .box__body {
      color: #f27011;
    }
  }
  &.is-actived {
    border: 2px solid var(--actColor);
    box-shadow: 0px 0px 2px 2px var(--actColor);
  }
  &.is-bottom20 {
    margin-bottom: 20px;
  }
  &.is-val {
    border: 2px solid #fef1e7;
    background: #fef1e7;
  }
}
.month-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
}

.task-box {
  background: #ffffff;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
  .title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 auto;
  }
  .value-p {
    text-align: center;
    font-size: 40px;
    font-family: Oxanium, Oxanium-Bold;
    font-weight: 700;
  }
}

.pie-box {
  display: flex;
  align-items: center;
  padding: 20px 70px;
  height: 420px;
  .pie {
    width: 300px;
  }
}

.legend {
  margin-left: 60px;
  width: 260px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  backdrop-filter: blur(6px);
  font-family: PingFang SC, PingFang SC-Semibold;
  font-weight: 600;
  color: #333333;
  line-height: 30px;
  & > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .legend-title {
    font-size: 14px;
    margin-bottom: 0;
  }
  .legend-item {
    i {
      display: inline-block;
      width: 10px;
      height: 10px;
      background: #33317e;
      border-radius: 2px;
      margin-right: 5px;
    }
    i.use {
      background: #f27011;
    }
    i.blue {
      background: #6360e8;
    }
  }
}
</style>
